<template>

  <el-row>
    <el-col :span="12"><div class="grid-content bg-purple" id="main1" style="width:80%;height:390px;margin-top:100px;margin-left:30px" ></div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple-light" id="main" style="width:5%;height:5%;margin-left:30px;margin-top:20px"><station1></station1></div></el-col>
  </el-row>
 <!-- <div id="chart" style="width: 800px;height: 600px;">
  </div>-->
</template>

<script>
  import station1 from "../../components/station1";


      /*mounted开始*/
        export default {
          name: "station",
          components: {station1},

          mounted() {
            this.init()
          },
          methods: {
            init: function () {
              var myChart = this.$echarts.init(document.getElementById('main1'));
              /*var dom = document.getElementById('chart');
              var chart = this.$echarts.init(dom);*/

              myChart.setOption({
               /* title:[{
                  left:'center',
                  text:'近四年驿站数量统计'
                },{
                  top:'55%',
                  left:'center',
                  text:'分解大V就'
                }],*/
                legend: {},
                tooltip: {},
                dataset: {
                  source: [
                    ['product', '2018', '2019', '2020', '2021'],
                    ['乡村驿站', 120, 300, 650, 530],
                    ['校园驿站', 860, 920, 850, 830],
                    ['社区驿站', 240, 670, 790, 860]
                  ]
                },
                xAxis: [
                  {type: 'category', gridIndex: 0},
                  {type: 'category', gridIndex: 1}
                ],
                yAxis: [
                  {gridIndex: 0},
                  {gridIndex: 1}
                ],
                grid: [
                  {bottom: '55%'},
                  {top: '55%'}
                ],
                series: [
                  // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
                  {type: 'bar', seriesLayoutBy: 'row'},
                  {type: 'bar', seriesLayoutBy: 'row'},
                  {type: 'bar', seriesLayoutBy: 'row'},
                  // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
                  {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                  {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                  {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                  {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
                ]
              });
              myChart.setOption(option);
            }
            /*mounted结束*/
          }
        }




</script>

<style scoped>

</style>
